<template>
  <div class="flex flex-col gap-4 p-4 rounded bg-bg-3">
    <div class="flex justify-between items-center">
      <div class="flex items-center">
        <div class="text-[24px] mr-5">{{ monthChinese }}</div>
        <div class="text-[24px] text-[#bfbfbf]">{{ year }}</div>
      </div>
      <div class="flex items-center gap-4">
        <a-button size="small" @click="handleOnClickToday">今天</a-button>
        <div class="flex gap-8">
          <a-button class="!bg-transparent" type="text" @click="handleOnClickPrevMonth">
            <template #icon>
              <guat-icon class="text-tc-1" :size="24" icon="ph:caret-left-bold" />
            </template>
          </a-button>
          <a-button class="!bg-transparent" type="text" @click="handleOnClickNextMonth">
            <template #icon>
              <guat-icon class="text-tc-1" :size="24" icon="ph:caret-right-bold" />
            </template>
          </a-button>
        </div>
      </div>
    </div>
    <div>
      <div class="grid grid-cols-7">
        <div
          class="py-3 px-1 text-base text-center select-none"
          v-for="day in ['日', '一', '二', '三', '四', '五', '六']"
        >
          周{{ day }}
        </div>
        <div class="p-1 mx-auto" v-for="date in dates">
          <div
            class="w-8 h-8 flex items-center justify-center cursor-pointer select-none hover:text-primary"
            :class="{
              'rounded-full bg-primary !text-white': date.isToday,
              'text-[#bfbfbf]': !date.isCurrentMonth,
            }"
            @click="handleOnClickDate(date)"
          >
            {{ date.date }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CalenderDate } from "@/hooks/useCalender";

const { today, dates, year, prevYear, prevMonth, nextYear, nextMonth, monthChinese } =
  useCalender();

const handleOnClickDate = (date: CalenderDate) => {
  today.value = new Date(date.year, date.month, date.date);
};

const handleOnClickToday = () => {
  today.value = new Date();
};

const handleOnClickPrevMonth = () => {
  today.value = new Date(unref(prevYear), unref(prevMonth), 1);
};

const handleOnClickNextMonth = () => {
  today.value = new Date(unref(nextYear), unref(nextMonth), 1);
};
</script>

<style scoped></style>
